<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    评论：<input type="text" />
    <!-- 创建有序列表 -->
    <ol></ol>
    <script>
      // 实现功能：input框中的值 按回车显示到有序列表中 且永远现在在第一位
      var cl = console.log;
      // 获取输入框与有序列表
      var input = document.querySelector("input");
      var ol = document.querySelector("ol");
      // keyDown 按下
      // keyup 抬起
      // keypress 获取单个字母，功能键无效
      // 创建事件监听
      input.addEventListener(
        "keyup",
        function (ev) {
          //   先拿到按键
          //   cl(ev.key);  回车  Enter
          // 是enter 才执行
          if (ev.key === "Enter") {
            // 判断input是否有值
            if (input.value.length === 0) {
              alert("输入框为空,提交失败");
              return
            }
            // 创建标签
            var li = document.createElement("li");
            // 加个删除按钮
            li.innerHTML =
              input.value + "<button onclick='del(this)'>删除</button>";
            // 判断是否有值
            if (ol.childElementCount === 0) {
              // 插入ol中
              ol.appendChild(li);
            } else {
              // 放到最前面
              ol.insertBefore(li, ol.firstElementChild);
            }
            // 清空input框
            input.value = null;
          }
        },
        false
      );
      //   删除函数
      function del(ele) {
        //   问一下要不要删除
        return confirm("是否删除？")
          ? ele.remove()
          : false;
      }
    </script>
  </body>
</html>